<template>
	<view class="course-detail">
		<view class="" v-for="item in allData" key="item.orderNum">
			<uni-card v-if="item.appraise==0">
				<view class="name felx-between">
					<text class="ddh">订单号：{{item.orderNum}}</text>
					<text class="ddh"> {{item.submitTime.slice(0,10)}}</text>
					<text class="ddh">{{item.submitTime.slice(11,16)}}</text>
					<text class="pj">待评价</text>
				</view>
					<view class="flex acsc">
						<view class="nabox flex-center">
							<text>{{item.courseName}}</text>
						</view>
						<view class="nameAbox">
							<view class="">
								{{item.courseName}}
							</view>
							<view class="">
								￥2999.00/10课时
							</view>
						</view>
					</view>
				<view class="felx-between vsf">
					<view class="">
						<uni-rate :readonly="true" :value="ratedata" />
					</view>
					<view class="button-box">
						<text>实付</text>
						<text>￥2799.00</text>
						<button @click="inputDialogToggle">评价课程</button>
					</view>
				</view>
			</uni-card>
			<uni-card v-else>
				<view class="name felx-between">
					<text class="ddh">订单号：{{item.orderNum}}</text>
					<text class="ddh"> {{item.submitTime.slice(0,10)}}</text>
					<text class="ddh"> {{item.submitTime.slice(11,16)}}</text>
					<text class="pj">已评价</text>
				</view>
					<view class="flex acsc">
						<view class="nabox flex-center">
							<text>{{item.courseName}}</text>
						</view>
						<view class="nameAbox">
							<view class="">
								{{item.courseName}}
							</view>
							<view class="">
								￥2999.00/10课时
							</view>
						</view>
					</view>
				<view class="felx-between vsf">
					<view class="flex-center">
						<uni-rate :readonly="true" :value="item.appraise" />
					</view>
					<view class="button-box">
						<text>实付</text>
						<text>￥2799.00</text>
						<button @click="inputDialogToggle(item.orderNum,item.appraise)">修改评价</button>
					</view>
				</view>
			</uni-card>
			
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="warning" @close="close" @confirm="confirm" title="您对此课程是否满意？满意请5星好评哦~" default>
					<view class="felx-between">
						<uni-rate :touchable="false" v-model="value" @change="onChange" />
						<text>{{textData}}</text>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import http from "@/utils/http.js"
	let popup = ref()
	let ratedata = ref(0);
	let value = ref(0);
	let textData = ref()
	let allData = ref()
	let order=ref()
	const inputDialogToggle = function(orderNum,appraise) {
		popup.value.open()
		order.value=orderNum
		value.value=appraise
		switch (value.value) {
			case 1:
				textData.value = "非常差"
				break;
			case 2:
				textData.value = "差"
				break;
			case 3:
				textData.value = "一般"
				break;
			case 4:
				textData.value = "好"
				break;
			case 5:
				textData.value = "非常好"
				break;
			default:
				textData.value = "评分"
				break;
		}
	}
	const close = function() {
		// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
		// ...
		console.log(1);

	}
	const confirm = function() {
		http({
			url:"/course/appraise",
			method:"post",
			params:{
				orderId:order.value,
				appraise:value.value
			}
		}).then((res)=>{
			console.log(res);
			uni.showToast({
				title: '评价成功',
				icon: 'success',
				orderNum
			})
		})
		ata()
		ratedata.value = value.value
	};
	const onChange = function(e) {
		value.value = e.value
		switch (value.value) {
			case 1:
				textData.value = "非常差"
				break;
			case 2:
				textData.value = "差"
				break;
			case 3:
				textData.value = "一般"
				break;
			case 4:
				textData.value = "好"
				break;
			case 5:
				textData.value = "非常好"
				break;
			default:
				textData.value = "评分"
				break;
		}
		console.log('rate发生改变:' + JSON.stringify(e))
		// console.log(this.rateValue);
	}
	const ata=function(){
		http({
			url: '/order/myCourseInfo01',
			params: {
				nickname: "幼稚园萌小疯",
				orderStatus: "已结束"
			}
		}).then((res) => {
			console.log(res);
			allData.value = res.data[0]?res.data:[res.data]
			console.log(allData.value);
		})
	}
	onMounted(() => {
		ata()
	})
</script>

<style lang="less">
	.flex {
		display: flex;

	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.felx-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name {
		margin-bottom: 46rpx;

		.ddh {
			font-weight: 400;
			font-style: normal;
			font-size: 24rpx;
			color: #999999;
		}

		.pj {
			font-weight: 700;
			font-style: normal;
			font-size: 24rpx;
			color: #1E1E1E;
		}

	}

	.acsc {
		.nabox {
			width: 176rpx;
			height: 128rpx;
			background: inherit;
			background-color: rgba(204, 102, 255, 1);
			border-radius: 8rpx;
			color: #fff;
			font-size: 20rpx;
			font-weight: 700;
		}

		.nameAbox {
			padding: 32rpx;
		}
	}

	.vsf {
		.button-box {
			button {
				width: 148rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background-color: #2f78ff;
				color: #fff;
				font-size: 22rpx;
			}

			text:nth-child(2) {
				color: #FF0000;
			}
		}
	}
</style>
